<template>
	<view class="container">
		<scroll-view scroll-y class="left-nav">
      <view v-for="item in categoryList" :key="item.categoryId" class="nav-item" :class="{ 'active': categoryId == item.categoryId }" @click="onCheckClass(item.categoryId)">{{ item.categoryName }}</view>
    </scroll-view>
    <scroll-view scroll-y class="left-class">
      <view class="banner">
        <image src="https://junhe.junhejiuye.cn/upload/image/goods.png" mode="widthFix" class="banner-img"></image>
      </view>
      <view class="class-citems">
        <view v-for="item in goodsList" :key="item.goodsId" class="class-citem-item" @click="onViewGoods(item)">
          <image class="class-citem-img" :src="item.thumb" mode="aspectFill"></image>
          <view class="class-citem-title">{{ item.goodsName }}</view>
          <view class="class-citem-price">￥{{ item.shopPrice }}</view>
        </view>
      </view> 
    </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        categoryId: '',
        categoryList: [],
        goodsList: [],
			}
		},
    onLoad() {
      this.getType()
    },
		methods: {
      onCheckClass(categoryId) {
        this.categoryId = categoryId
        this.getGoods()
      },
      getType() {
        this.$http({
          url: '/goods/getCategoryList',
        }).then(res => {
          this.categoryList = res.data.categoryList
          if (res.data.categoryList && res.data.categoryList.length) {
            this.categoryId = res.data.categoryList[0].categoryId
            this.getGoods()
          }
        })
      },
      getGoods() {
        this.$http({
          url: '/goods/getGoodsList',
          data: {
            categoryId: this.categoryId
          }
        }).then(res => {
          
          this.goodsList = res.data.goodsList
        })
      },
      onViewGoods(item) {
        uni.navigateTo({
          url: `./detail?id=${item.goodsId}`
        })
      }
      
		}
	}
</script>

<style lang="less">
	.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: #fff;
	}
  .left-nav{
    width: 200rpx;
    border-right: 1px solid #e8e8e8;
    height: 100%;
    padding: 18rpx 0;
    box-sizing: border-box;
    background-color: #e5e5e5;
    flex-shrink: 0;
    .nav-item{
      width: 100%;
      text-align: center;
      line-height: 78rpx;
      height: 78rpx;
      font-size: 28rpx;
      color: #999;
      transition: all .2s;
      &.active{
        color: #333;
        background-color: #fff;
      }
    }
  }
  .left-class{
    width: calc(100vw - 200rpx);
    height: 100%;
    background-color: #F3F3F3;
    box-sizing: border-box;
    padding: 10rpx 30rpx;
    .class-citems{
      display: flex;
      flex-wrap: wrap;
    }
    .class-citem-item{
      width: calc(33% - 15rpx);
      text-align: center;
      margin-bottom: 30rpx;
      margin-right: 15rpx;
    }
    .class-citem-img{
      display: block;
      margin: 0 auto;
      width: 88rpx;
      height: 88rpx;
      object-fit: cover;
      margin-bottom: 12rpx;
    }
    .class-citem-title{
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 44rpx;
      margin-top: 20rpx;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .class-citem-price{
      display: block;
      font-size: 26rpx;
      color: #d4380d;
      line-height: 44rpx;
    }
    .banner{
      margin-bottom: 30rpx;
    }
    .banner-img{
      width: 100%;
    }
  }
</style>
